<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>js-form-test</title>

    <link type="text/css" rel="stylesheet" href="css/main.css">

</head>
<body>
<div id="sendForm">
    <div id="result">log is empty</div>
    <textarea class="textareaSend" type="text" id="myInput" onkeypress="return runScript(event)"></textarea>   </br>
    <button class="buttonSend" onClick='clickMe()'>send</button>
</div>     <br><br> <br><br> <br><br> <br><br>

<script>

    var count = 0;
    var inputResult = document.getElementById('myInput');
    var arraydata = [];

    /* delete window */
    var deleteElements = function (id) {
        document.getElementById("content-" + id).setAttribute("style", "display:none");
        document.getElementById("title-" + id).setAttribute("style", "display:none");
        document.getElementById("button-" + id).setAttribute("style", "display:none");
    }

    /* create window */
    var createWindow = function (id, title, content) {

        var newDivTitle = document.createElement('div');
        newDivTitle.setAttribute('id', "title-" + id);
        //newDivTitle.setAttribute('style', 'width:720px');
        newDivTitle.setAttribute('class', 'newDivTitle');

        var newDivContent = document.createElement('div');
        newDivContent.setAttribute('id', "content-" + id);
        //newDivContent.setAttribute('style', 'width:700px');
        newDivContent.setAttribute('class', 'newDivContent');

        var button = document.createElement('button');
        button.setAttribute('id', "button-" + id);
        button.setAttribute('onclick', 'deleteElements(' + id + ');');
        button.innerHTML = "delete";
        //button.setAttribute('style', 'margin-bottom:13px; margin-top:-10px;');
        button.setAttribute('class', 'newDivButton');

        if (title && content) {
            newDivTitle.innerHTML = title;
            newDivContent.innerHTML = content;
        } else {
            newDivTitle.innerHTML = "nothing";
            newDivContent.innerHTML = "nothing";
        }

        document.body.appendChild(newDivTitle);
        document.body.appendChild(newDivContent);
        document.body.appendChild(button);
    }

    var getXmlHttp = function () {

        var xmlhttp;

        try {

            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp = false;
            }
        }

        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
            xmlhttp = new XMLHttpRequest();
        }

        return xmlhttp;
    }


    function runScript(e) {
        if (e.keyCode == 13) {
            eval(clickMe());
            return false;
        }
    }

    clickMe = function () {

        if (inputResult.value != "") {

            count++;


            var result = document.getElementById('result');


            arraydata[arraydata.length] = inputResult.value;


            result.innerHTML = "log: " + count + "\n" + "[arraySize = " + arraydata.length + "]" + "\n" /*+ arraydata*/;


            var xmlhttp = getXmlHttp();
            xmlhttp.open('GET', document.URL, true);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {

                        //createdivTitle("title"+count, "Title "+"[" + xmlhttp.getAllResponseHeaders() + "]");
                    }
                }
            };
            xmlhttp.send(inputResult.value);


            /*parser = new DOMParser();
             xmlDoc = parser.parseFromString(inputResult.value,"text/xml");
             var serializer = new XMLSerializer();
             var stringresult = serializer.serializeToString(xmlDoc); */

            //createdivTitle("title"+count,  "titld" + " "+"[" + count +"]");
            //creatediv(count, inputResult.value/*stringresult*/);

            createWindow(count, "title" + " " + "[" + count + "]", inputResult.value);


        }

        inputResult.value = ""; // clear input

    }


</script>
</body>
</html>